import { createContext, Dispatch, SetStateAction, use, useContext, useState } from 'react'
import * as Radash from 'radash'

interface BoxProps {
    counter: number,
    setCounter: Dispatch<SetStateAction<number>>,
}

function Box() {

    //const prop = useContext(UserContext)
    const prop = use(UserContext)

    return (
        <div className={ 'p-10 bg-slate-300' }>
            <p>{ prop.name }</p>
            <p>{ prop.age }</p>
        </div>
    )
}

interface User {
    name: string,
    age: number,
}

const UserContext = createContext<User>({ name: '', age: 0 })

export function Context () {

    const [ user, setUser ] = useState<User>({ name: '张三', age: 18 })

    return (
        <UserContext value={ user }>
            <div className={ 'p-20 bg-rose-400' }>
                <button className={ 'py-3 px-5 bg-purple-400' }
                        onClick={ () => setUser(prev => ({ ...prev, name: Radash.uid(6) })) }>
                    click
                </button>
                <p>{ user.name }</p>
                <p>{ user.age }</p>
                <Box />
            </div>
        </UserContext>
    )
}
